{include file="index@public/header" /}
<style>
    .wanshan{
        position:absolute;
        top:3em;
        width:80%;
        margin:10%;
        overflow: auto;
        height:1800px;
    }
    .wanshan .images img{
        margin:.1em;
    }
    .wanshan .wenjian{
        position: absolute;
        top: 1.3em;
        left: 3em;
        opacity: 0;
    }
    .wanshan .zhaopian img{
        width:4em;height:4em;
    }
    .wanshan .zhaopian input[type="file"]{
        position: absolute;
        width: 4em;
        top: -1em;
        left:0;
        height: 4em;
        opacity: 0;
    }
    .wanshan .zhaopian span{
        position: relative;
    }
    .wanshan .touxiang{
        position: relative;
    }
</style>
<div class = "wanshan">
    <input type = "hidden" value = "{if isset($bianji)}{$list}{/if}" id = "bianji" name = "test"/>
    <form role="form" name = "myForm">
        <!--YY号-->
        <div class="form-group">
            <label>YY号</label>
            <input class = "form-control" value = "{$id}" name = "uid" readonly="readonly"/>
            <p class = "help-block">请记住您的YY号</p>
        </div>
        <!--头像-->
        <div class="form-group touxiang">
            <label>头像</label>
            <img src="{if isset($bianji)}{$list['touxiang']}{/if}" alt="" style = "width:4em;height:4em;margin-left:1em;" class = "img-circle" onerror="javascript:this.src='/upload/images/login-img.jpg'"/>
            <input type = "file" class  ="wenjian" accept="image/*" onchange = "uploadImg($(this),'touxiang')"/>
            <p class = "help-block">点击图片即可上传</p>
        </div>
        <!--性别-->
        <div class="form-group">
            <label>性别</label>
            <select class = "form-control" name = "sex" required>
                <option value="">--请选择--</option>
            </select>
        </div>
        <!--年龄-->
        <div class="form-group">
            <label>生日</label>
            <input type = "date" class = "form-control" name = "birthday" value = "{if isset($bianji)}{$list['birthday']}{/if}" required/>
        </div>
        <!--婚否-->
        <div class="form-group">
            <label>婚否</label>
            <select class = "form-control" name = "hunfou" required>
                <option>--请选择--</option>
            </select>
        </div>
        <!--子女-->
        <div class="form-group">
            <label>子女</label>
            <select class = "form-control" name = "zinv" required>
                <option>--请选择--</option></select>
        </div>
        <!--学历-->
        <div class="form-group">
            <label>学历</label>
            <select class = "form-control" name = "xueli">
                <option>--请选择--</option>
            </select>
        </div>
        <!--职业-->
        <div class="form-group">
            <label>职业</label>
            <input class = "form-control" value = "{if isset($bianji)}{$list['zhiye']}{/if}" name = "zhiye"/>
            <p class = "help-block">请填写您的职业</p>
        </div>
        <!--收入-->
        <div class="form-group">
            <label>收入</label>
            <select class = "form-control" name = "shouru">
                <option>--请选择--</option>
            </select>
            <p class = "help-block">请选择平均月收入(年收入/12)</p>
        </div>
        <!--籍贯-->
        <div class="form-group">
            <label>籍贯</label>
            <input type = "text" class = "form-control" value = "{if isset($bianji)}{$list['jiguan']}{/if}" name = "jiguan"/>
            <p class = "help-block">请填写您的籍贯</p>
        </div>
        <!--QQ-->
        <div class="form-group">
            <label>QQ</label>
            <input type = "number" class = "form-control" value = "{if isset($bianji)}{$list['qq']}{/if}" name = "qq"/>
                <p class = "help-block">请填写您的QQ</p>
        </div>
        <!--手机号-->
        <div class="form-group">
            <label>手机号</label>
            <input type = "number" class = "form-control" value = "{if isset($bianji)}{$list['mobile']}{/if}" name = "mobile"/>
            <p class = "help-block">请填写您的电话号码</p>
        </div>
        <!--身高-->
        <div class="form-group">
            <label>身高</label>
            <input type = "number" class = "form-control" name = "shengao" value = "{if isset($bianji)}{$list['shengao']}{/if}" min="100" max="250" required>
            <p class = "help-block">请填写您的身高(例:168)</p>
        </div>
        <!--形象照-->
        <div class="form-group zhaopian">
            <label>形象照</label>
            <div class = "images"><span><img src="{if isset($bianji)}{$list['shpic01']}{/if}" onerror="javascript:this.src='/upload/images/login-img.jpg'"/><input type = "file" accept="image/*"  onchange = "uploadImg($(this),'shpic01')" /></span><span><img src="{if isset($bianji)}{$list['shpic02']}{/if}" onerror="javascript:this.src='/upload/images/login-img.jpg'"/><input type = "file" accept="image/*"  onchange = "uploadImg($(this),'shpic02')"/></span><span><img src="{if isset($bianji)}{$list['shpic03']}{/if}" onerror="javascript:this.src='/upload/images/login-img.jpg'"/><input type = "file" accept="image/*"  onchange = "uploadImg($(this),'shpic03')"/></span></div>
            <p class = "help-block">请上传您的生活照（点击即可上传,最多可传三张）</p>
        </div>
        <!--密保-->
        <div class="form-group">
            <label>密保</label>
            <select class = "form-control" name = "mibao" required></select>
            <p class = "help-block">密保用于密码找回，请您认真填写，选择其中一个回答即可</p>
            <input type = "text" class = "form-control" value = "{if isset($bianji)}{$list['mbdaan']}{/if}" placeholder = "填写答案" name = 'mbdaan' required/>
        </div>
        <!--内心独白-->
        <div class="form-group">
            <label>内心独白</label>
            <textarea rows = "4" class = "form-control" name = "dubai">{if isset($bianji)}{$list['dubai']}{/if}</textarea>
            <p class = "help-block">请填写需要补充的内容/详细的自我介绍/征婚启事</p>
        </div>
        <div class="checkbox">
            <label>
                <input type = "checkbox" class = "checkbox" ng-click = "check = !check" ng-init = "check = true" checked="checked" required/s>同意<a href = "#">《在线交友协议》</a>
            </label>
        </div>
        <div class = "col-xs-12 text-center"><button type="submit" class = "btn btn-primary">点击提交</button></div>
    </form>
</div>
<script src="__PUBLIC__/js/peizhi.js"></script>
<script type="text/javascript">
    var list = [],shuju = ['sex','hunfou','zinv','xueli','shouru','mibao'];
    ($("#bianji").val())? list = JSON.parse('{$list}'):list = [];
    function item(){
        for(var i = 0;i < shuju.length;i++){
            switch(shuju[i])
            {
                case shuju[i]:tianjia(shuju[i],peizhi[i]);
                    break;
                default:
                    return false;
            }
        }
    }
    item();
    function tianjia(object,data){
        for(var i=0;i<data.child.length;i++){
            list[object] == data.child[i].id ? xuan = 'selected':xuan = '';
            $("select[name="+object+"]").append("<option value = '"+data.child[i].id+"' "+xuan+">"+data.child[i].name+"</option>");
        }
    }
    function uploadImg(file,type){
        var imgUrl = getObjectURL(file[0].files[0]),fileName = file[0].files[0].name,image = '',reader = new FileReader(),last = fileName.substring(fileName.lastIndexOf("."),fileName.length).toUpperCase();
        if(last!=".BMP"&&last!=".PNG"&&last!=".GIF"&&last!=".JPG"&&last!=".JPEG"){
            $.messager.show('图片限于bmp,png,gif,jpeg,jpg格式', {placement: 'center',type:'success'});
            return false;
        }
        if(file.size>2*1024*1024){
            $.messager.show('请上传2M以内的图片', {placement: 'center',type:'success'});
            return false;
        }
        reader.readAsDataURL(file[0].files[0]);
        reader.onload = function(){
            image = this.result; //就是base64
            $.ajax({
                type: "post",
                url: '/index/index/imageUpload',
                data: {'number':$("input[name='uid']")[0].value,'passData':image,'type':type},
                cache:false,
                dataType: 'json',
                success: function (data){
                    if(data.code){
                        $.messager.show(data.msg, {placement: 'center',type:'success'});
                        file.prev().attr('src',imgUrl);
                    } else {
                        $.messager.show(data.msg, {placement: 'center',type:'failure'});
                    }
                }
            });
        }
    }
    function getObjectURL(file){
        var url = null ;
        if (window.createObjectURL!=undefined){ // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined){ // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined){ // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>
{include file="index@public/footer" /}